<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <ChartCard title="累计产值" :count="totalValue">
          <!-- <template #charts>
            <span>周同比&nbsp;&nbsp;56.67%</span>
            <span>日同比&nbsp;&nbsp;56.67%</span>
          </template> -->
          <template #footer>
            <span>月产值&nbsp;&nbsp;{{ Number(totalValue / 12).toFixed(2) }}</span>
          </template>
        </ChartCard>
      </el-col>
      <el-col :span="6">
        <ChartCard title="年项目数量" :count="monthlyProject">
          <template #charts>
            <lineCharts :dataList="projectCount"></lineCharts>
          </template>
          <template #footer>
            <span>平均月项目数量&nbsp;&nbsp;{{ Math.round(Number(monthlyProject / 12)) <= 0 ? 1 : Math.round(Number(monthlyProject /
              12)) }}</span>
          </template>
        </ChartCard>
      </el-col>
      <el-col :span="6">
        <ChartCard title="支付笔数" :count="monthlyPayProject">
          <template #charts>
            <barCharts :dataList="payProjectList"></barCharts>
          </template>
          <template #footer>
            <span>平均月支付笔数&nbsp;&nbsp;{{ Math.round(Number(monthlyPayProject / 12))
              <= 0 ? 1 : Math.round(Number(monthlyPayProject / 12)) }}</span>
          </template>
        </ChartCard>
      </el-col>
      <el-col :span="6">
        <ChartCard title="结算进度" :count="`${settlement.rateR}%`">
          <template #charts>
            <el-progress :percentage="settlement.rateR" />
          </template>
          <template #footer>
            <div style="display: flex;justify-content: space-between">
              <span>台账总个数&nbsp;&nbsp;{{ settlement.sumAll }}</span>
              <span>已结算个数&nbsp;&nbsp;{{ settlement.redgerSum }}</span>
            </div>

          </template>
        </ChartCard>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="js" setup>
import { ref, watch } from 'vue'
import ChartCard from '@/components/chart/ChartCard.vue';
import lineCharts from '@/components/chart/lineCharts.vue';
import barCharts from '@/components/chart/barCharts.vue';
import progressCharts from '@/components/chart/progressCharts.vue';
import { getHomeData } from '@/api/home.js'


// 累计产值
const totalValue = ref()
//月项目数量
const projectCount = ref([])
//支付笔数
const payProjectList = ref([])
//结算进度
const settlement = ref([
  {
    sumAll: 0,
    rateR: 0,
    redgerSum: 0
  }])
const props = defineProps(['data'])

// 获得累计产值
watch(props,
  (newValue) => {
    totalValue.value = newValue.data.sumCost
    projectCount.value = newValue.data.project12M
    payProjectList.value = newValue.data.month12Redger
    monthlyProject.value = countUp(projectCount.value, 'sumData')
    monthlyPayProject.value = countUp(payProjectList.value, 'countData')
    settlement.value = newValue.data.redgerRate[0]
  }), { immediate: true }


const monthlyProject = ref()
const monthlyPayProject = ref()
const countUp = (data, files) => {
  const sum = data.reduce((acc, item) => acc + item[files], 0);
  return sum;
}

/**
* 数字转整数 如 100000 转为10万
* @param {需要转化的数} num
* @param {需要保留的小数位数} point
*/

// const tranNumber = (num, point) => {
//   let numStr = num.toString();
//   if (numStr.length < 6) {
//     return numStr;
//   } else if (numStr.length > 8) {
//     return `${(num / 100000000).toFixed(point)} 亿`;
//   } else if (numStr.length > 5) {
//     return `${(num / 10000).toFixed(point)} 万`;
//   }
// };

</script>
